
import React, { useMemo } from 'react'
import { HashRouter, Route, Routes, Navigate, useLocation, RouteProps } from 'react-router-dom'
import styled from 'styled-components'
import Login from '../pages/login'
import Home from '../pages/home'
import Launch from '../pages/launch'
import Team from '../pages/team'
import Task from '../pages/task'
import Wallet from '../pages/wallet'
import Accelerate from '../pages/upgrade'
import Unsupport from '../pages/unsupport'
import Ranking from '../pages/ranking'
import Ton from '../pages/ton'
import Withdraw from '../pages/withdraw'
import Record from '../pages/record'

import TabBar, { LinkInfo } from '../component/Tabbar'
import { useSelector } from 'react-redux'
import { RootState } from '../store'
import { Router } from './interface'

interface Props {
    tabbar?: Array<LinkInfo>;
    noTabs?: Array<Router>; // 不显示tabbar的路由
}


const AppWrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100vh;
`;

const Tab = styled(TabBar)`
    padding: 0 1rem;
    box-sizing: border-box;
    background-color: transparent;
`

const SafeAreaBottom = styled.div<{ height: string }>`
    height: ${({ height }) => height};
    min-height: ${({ height }) => height};
    /* background-color: ${(prop) => prop.theme.background.normal}; */
`

const TabBarBox: React.FC<Props> = ({ tabbar, noTabs }) => {
    const safeArea = useSelector((state: RootState) => state.safeArea)
    const location = useLocation()
    const hiddenTabBar = useMemo(() => {
        if (noTabs) {
            return noTabs?.includes(location.pathname as Router)
        }

        return !(tabbar?.find((e) => e.path === location.pathname))

    }, [location.pathname, noTabs, tabbar])
    return <>
        {(tabbar?.length && !hiddenTabBar) && <Tab list={tabbar} />}
        {(tabbar?.length && !hiddenTabBar) && <SafeAreaBottom height={safeArea.bottom} />}
    </>
}

const Routers: React.FC<Props> = ({ tabbar, noTabs }) => {

    const routers: Array<RouteProps> = useMemo(() => {
        return [
            { path: Router.Launch, Component: Launch },
            { path: Router.Login, Component: Login },
            { path: Router.Home, Component: Home },
            { path: Router.Task, Component: Task },
            { path: Router.Accelerate, Component: Accelerate },
            { path: Router.Wallet, Component: Wallet },
            { path: Router.Team, Component: Team },
            { path: Router.Unsupport, Component: Unsupport },
            { path: Router.Ranking, Component: Ranking },
            { path: Router.Ton, Component: Ton },
            { path: Router.Withdraw, Component: Withdraw },
            { path: Router.Record, Component: Record },

            { path: Router.Root, element: <Navigate to={Router.Launch} /> },
        ]
    }, [])

    return (
        <HashRouter>
            <AppWrapper>
                <Routes>
                    {routers.map(item => (<Route
                        key={item.path}
                        {...item}
                    />))}
                </Routes>
                <TabBarBox
                    tabbar={tabbar}
                    noTabs={noTabs}
                />
            </AppWrapper>
        </HashRouter>
    )

}

export default Routers